<template>
    <div class="page" data-page="communicatServerDetail" style="z-index: 2;">
        <div class="navbar moreUnitList">
            <div class="navbar-inner">
                <div class="left">
                    <a href="#" class="link back">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">Back</span>
                    </a>
                </div>
                <!--通讯服务器详情-->
                <div class="title" style="left: -27px;">详情</div>
            </div>
        </div>

        <div class="page-content">
            <div class="toptext" id="NowOffTime"></div>
            <div class="detailtext">
                <div class="blueline"></div>
                <div class="bluelinetext">基本信息</div>
                <ul class="lineone"></ul>
            </div>
            <div class=" list media-list listline">
                <div class="item-title-row">
                    <div class="item-title">单位名称</div>
                    <div class="item-after" id="unit_Name"></div>
                </div>
                <div class="item-title-row topline">
                    <div class="item-title">通讯服务器名称</div>
                    <div class="item-after" id="serverName"></div>
                </div>
                <div class="item-title-row topline">
                    <div class="item-title">型号</div>
                    <div class="item-after" id="Model"></div>
                </div>
                <div class="item-title-row topline">
                    <div class="item-title">历史离线总数</div>
                    <div class="item-after" id="frequency"></div>
                </div>
            </div>
            <div class="detailtext">
                <div class="blueline"></div>
                <div class="bluelinetext">离线历史</div>
                <ul class="lineone"></ul>

                <div class="row thrtext">
                    <div class="col" style="text-align: center">开始时间</div>
                    <div class="col" style="text-align: center;">结束时间</div>
                    <div class="col" style="text-align: center;">离线时长</div>
                </div>
                <div class="list media-list otherlistline">
                    <ul>

                    </ul>
                </div>
            </div>

        </div>
    </div>
</template>
<style>
    .textfon {
        font-size: 12px;
        text-align: left;
    }

    .otherlistline {
        position: absolute;
        width: 100%;
        top: 23px;
        height: 70px;
    }

    .thrtext {
        font-size: 14px;
        top: 32px;
        position: absolute;
        width: 100%;
    }

    .topline {
        padding-top: 16px;
    }

    .listline {
        top: 19px;
        padding-left: 26px;
        padding-right: 26px;
        font-size: 14px;
    }

    .lineone {
        position: absolute;
        top: 9px;
        left: 0px;
        right: 0px;
        height: 1px;
        background: #e1e1e1;
    }

    .bluelinetext {
        position: absolute;
        left: 25px;
        top: -6px;
        font-size: 18px;
    }

    .blueline {
        position: absolute;
        left: 15px;
        width: 2px;
        top: -1px;
        height: 17px;
        background: #509dff;
    }

    .detailtext {
        position: relative;
        top: 19px;
    }

    .toptext {
        padding-left: 25px;
        padding-top: 10px;
        height: 30px;
        font-size: 14px;
        position: relative;
    }
    .list ul:before{
        height: 0px!important;
    }
    .list ul:after{
        height: 0px!important;
    }
</style>
<script>
    return {

        mounted() {
            var self = this;
            self.getcommunicatServerDetaildata();
        },

        methods: {
            getcommunicatServerDetaildata: function () {
                var self = this;
                var $ = self.$$;
                common.loading(1);
                Dao.getcommunicatServerDetail({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    serverId:this.$route.params.serverId,
                    queryType:0,
                    pageIndex:0,
                    pageSize:1
                }, function (data) {
                    if(data.isOnline==0){
                        if (data.outlineList&&data.outlineList.length>0) {
                            $("#NowOffTime").append(
                                common.transNullundefined(data.outlineList[0].createTime + "离线,目前离线")
                            )
                        }else{
                            $("#NowOffTime").append(
                                common.transNullundefined("目前离线")
                            )
                        }
                    }else
                    {
                        $("#NowOffTime").append(
                            common.transNullundefined("目前在线")
                        )
                    }
                    $("#unit_Name").append(
                        common.transNullundefined(data.organizationName)
                    )
                    $("#serverName").append(
                        common.transNullundefined(data.serverId)
                    )
                    $("#Model").append(
                        common.transNullundefined(data.model)
                    )
                    $("#frequency").append(
                        common.transNullundefined(data.outlineTotal + "次")
                    )
                    if (data.outlineList&&data.outlineList.length>0){

                        for (var i=0;i<data.outlineList.length;i++){
                            var listdata=data.outlineList[i];
                            $(".otherlistline ul").append(
                                `<li class="row textfon">
                        <div class="col"style="text-align: center;line-height: 40px;">` + common.transNullundefined(listdata.createTime) + `</div>
                        <div class="col"style="text-align: center;line-height: 40px;">` + common.transNullundefined(listdata.resetTime)+ `</div>
                        <div class="col"style="text-align: center;line-height: 40px;">` + common.transNullundefined(listdata.outlineDuration) + `</div>
                    </li>`);
                        }
                    }else{
                        $(".otherlistline ul").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"></div>`);
                    }
                    common.loading(0);
                });
            }
        },
        on: {}
    }

</script>